import React from 'react';
import {findDOMNode} from 'react-dom';
import echarts from 'echarts';
import * as ChartsStyle from './ChartsPolar.less';

export default class ChartsPolar extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
  };
  drawChart = () => {
  	//引入echaets,链接画布
    let { data, color = '#64dcdc', name } = this.props;
  	let myChart = echarts.init(findDOMNode(this.refs.charts));
  	let option = {};
  	//处理图表数据
  	
   option = {
          legend: {
              x: 'left',
              y:'bottom',
              data:[`${name}`]
          },
          tooltip: {
            trigger: 'item',
            formatter:(params)=>{
              let { value, dataIndex } = params;
              return `<p style="background: #5e6166; color: #fff; padding: 5px;">
                        ${dataIndex}-${dataIndex+1}时
                      </p>
                      <p style="padding: 5px;">
                      ${name}:${value}次
                    </p>`
          },
          backgroundColor: '#ececec',
          padding: 0,
          textStyle: {
            color: '#5e6166'
          }
        },
          polar: {},
          angleAxis: {
              min: 0,
              max: 24,
              interval: 1,
              splitLine:{show:true},
               axisTick:{show:false},
          },
          radiusAxis: {
              min: 0,
              max: 10,
              interval: 5,
              axisTick:{show:false},
              splitLine:{show:true},
              axisLabel:{show:false},
              axisLine:{show:false}
          },
         
         series : [
            {
                type:'pie',
                name:`${name}`,
                center:['50%','50%'],
                roseType : 'area',
                minAngle:15,
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                labelLine: {
                    normal: {show: false},
                    emphasis: {show: false,}
                },
                itemStyle: {normal: {color,borderColor:'#fff',borderWidth:1}},
                data
            }
        ]
    };
    //绘制图表
    myChart.setOption(option);

  };
  componentDidMount() {
  	//初始加载绘图
  	this.drawChart()
  };
  componentWillReceiveProps(nextProps) {
  	//数据变化画图
  	this.drawChart()
  }
  render() {
    return (
      <div ref = 'charts' className={ChartsStyle.chartPolar} ></div>
    );
  }
};
